<template>
  <div class="Profile-Box">
    <div><span class="Profile-List"></span> 数据概况</div>
    <div class="Profile-Date">
      <span>选择日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div class="Profile-Tab">
      <DataProfileEcharts></DataProfileEcharts>
      <!-- 导出 -->
      <DeriveBtn :dataList="data3"></DeriveBtn>
      <div>
        <el-table :data="data3" stripe style="width: 100%;font-size: 12px;" show-summary="true">
          <el-table-column prop="name" label="数据类型" align="center" width="100" />
          <el-table-column prop="1/1" label="1/1" align="center" />
          <el-table-column prop="1/2" label="1/2" align="center" />
          <el-table-column prop="1/3" label="1/3" align="center" />
          <el-table-column prop="1/4" label="1/4" align="center" />
          <el-table-column prop="1/5" label="1/5" align="center" />
          <el-table-column prop="1/6" label="1/6" align="center" />
          <el-table-column prop="1/7" label="1/7" align="center" />
          <el-table-column prop="1/8" label="1/8" align="center" />
          <el-table-column prop="1/9" label="1/9" align="center" />
          <el-table-column prop="1/10" label="1/10" align="center" />
          <el-table-column prop="1/11" label="1/11" align="center" />
          <el-table-column prop="1/12" label="1/12" align="center" />
        </el-table>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <JmnlChart></JmnlChart>
      <JmxlChart></JmxlChart>
      <JmxbChart></JmxbChart>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <PeopleLabel :msg="no"></PeopleLabel>
      <serviceChart></serviceChart>
    </div>
  </div>
</template>

<script lang='ts' setup>
import DatePicker from "@/components/mmm/DatePicker.vue"
import { ref, reactive } from 'vue'
import api from '@/api'
import DataProfileEcharts from "@/components/mmm/dataProfileEcharts.vue"
import DeriveBtn from "@/components/mmm/deriveBtn.vue";
import JmxbChart from "@/components/mmm/jmxbChart.vue";
import JmnlChart from "@/components/mmm/jmnlChart.vue";
import JmxlChart from "@/components/mmm/jmxlChart.vue";
import PeopleLabel from "@/components/mmm/peopleLabel.vue";
import serviceChart from "@/components/mmm/serviceChart.vue";
import useNumStore from "@/store/mmm/useNumStore"
const store = useNumStore()
// let TabList = reactive({}
let data = reactive<any>({})
let data1 = reactive<any>({})
let data2 = reactive<any>({})
let data3 = ref([])
let no = ref()


const gkTab = async () => {
  const result = await api.Mdatastatistics.getPeopleContractApi({ months: store.mounthStore })
  // console.log(",,,,,,,,,,,", result.data.data);
  const aaa = result.data.data
  // console.log(aaa);
  let resident = aaa.resident
  let service = aaa.service
  let sign = aaa.sign

  // console.log(resident, service, sign);

  for (let i = 0; i < resident.length; i++) {
    const key = resident[i][0];
    data[key] = resident[i][1];

  }
  for (let i = 0; i < service.length; i++) {
    const key = service[i][0];
    data1[key] = service[i][1];

  }
  for (let i = 0; i < sign.length; i++) {
    const key = sign[i][0];
    data2[key] = sign[i][1];

  }
  data = { name: "新增居民数量", ...data }
  data1 = { name: "新增签约量", ...data1 }
  data2 = { name: "新增服务量", ...data2 }
  data3.value.push(data)
  data3.value.push(data1)
  data3.value.push(data2)

  // console.log("resident", data3.value);
}
gkTab()
//获取居民总数量
const postResidentBySOTSLByPage = async () => {
  const result = await api.Mdatastatistics.postResidentBySOTSLByPageApi()
  // console.log("具名总数量", result.data.data.result.length);
  no.value = result.data.data.result.length
}

postResidentBySOTSLByPage()
</script>

<style lang='scss' scoped>
.Profile-Box {
  @include BoxStyle;

  .Profile-List {
    @include dataList;
  }

  .Profile-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }
}
</style>